<template>
	<view class="item-wrap" v-if="Object.keys(item).length>0">
		<view class="item-title yf-flex-between">
			<view class="item-name">
				{{item.userName}}
			</view>
			<view class="item-section yf-flex-center">
				{{item.deptName}}
			</view>
		</view>
		<view class="item-content yf-flex">
			<image :src="imagePath+item.img" @click="bindImg(imagePath+item.img)" mode="aspectFill"
				class="history-img" v-if="item.img"></image>
			<view class="item-content-right">
				<view class="item-content-text" v-if="item.phone">
					联系电话：{{item.phone}}
				</view>
				<view class="item-content-text" v-if="item.remark">
					工作事由：{{item.remark}}
				</view>
				<view class="item-content-text yf-flex" v-if="item.createTimeString">
					<text class="item-content-text">打卡时间：</text>  
					<view class="item-content-text">
						{{item.createTimeString.split(' ')[0]}}<br/>
						{{item.createTimeString.split(' ')[1]}}
					</view>
				</view>
			</view>
			
		</view>
		<view class="item-bottom yf-flex-left">
			<image src="/static/common/addr_icon.png" mode="" class="item-icon"></image>
			<view class="item-addr conceal1">
				{{item.address}}
			</view>
			<!-- <view class="item-btn yf-flex-center" @click="jumpTo('clockDetail',{info:JSON.stringify(item)})">
				查看
			</view> -->
		</view>
	</view>
</template>

<script>
	import{mapState}from"vuex"
	export default {
		props: {
			item: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {

			};
		},
		computed:{
			...mapState(["imagePath"])
		},
		methods: {
			// 跳转
			jumpTo(url, param) {
				this.$Router.navigateTo(url, param)
			},
			// 点击图片
			bindImg(img) {
				uni.previewImage({
					urls: [img],
					current: 0
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.item-wrap {
		width: 100%;
		border-radius: 20rpx;
		background: #fff;
		box-shadow: 0px 2rpx 6rpx 0px rgba(180, 180, 180, 40);
		overflow: hidden;
		margin-bottom: 24rpx;

		.item-title {
			width: 100%;
			height: 90rpx;
			padding: 0 22rpx;
			margin-top: 10rpx;

			.item-name {
				font-size: 12+26rpx;
				font-weight: bold;
				color: #101010;
			}

			.item-section {
				height: 44rpx;
				border-radius: 50rpx;
				background-color: rgba(230, 243, 255, 1);
				font-size: 12+24rpx;
				color: #3291F8;
				padding: 30rpx;
				min-width: 108rpx;
			}
		}

		.item-content {
			padding: 0 22rpx 22rpx;
			.history-img{
				width: 240rpx;
				height: 150rpx;
				margin-right: 20rpx;
				margin-top: 9rpx;
			}
			.item-content-right{
				flex: 1;
				.item-content-text {
					padding-bottom: 10rpx;
					font-size: 10+22rpx;
					color: #797979; 
					word-break: break-all;
				}
			}
			
		}

		.item-bottom {
			padding: 0 24rpx;
			height: 62rpx;
			background: #F4F8FB;
			position: relative;

			.item-icon {
				width: 50rpx;
				height: 50rpx;
				margin-right: 18rpx;
			}

			.item-addr {
				// max-width: 430rpx;
				flex: 1;
				font-size: 12+24rpx;
				color: #4B4B4B;
			}

			.item-btn {
				position: absolute;
				right: 24rpx;
				top: 6rpx;
				width: 129rpx;
				height: 50rpx;
				border-radius: 50rpx;
				background-color: rgba(50, 145, 248, 1);
				color: rgba(255, 255, 255, 1);
				font-size: 12+26rpx;
			}
		}
	}
</style>